/* ==========================================================================
   Paleta de Cores Synergy Assessoria (Substituição no arquivo royal.css)
   ========================================================================== */

/* 1. Cores de Fundo (Backgrounds) e Tipografia (Textos) */
body {
    background-color: #FFFFFF;
    color: #4A4A4A;
    overflow-x: hidden; /* Evita rolagem horizontal acidental */
}

/* Off-White / Cinza Claro para separar seções suavemente */
#services, 
#equipe, 
#testimonials, 
#brand,
.newsblog {
    background-color: #F8F9FA;
}

/* Grafite Escuro para Títulos */
h1, h2, h3, h4, h5, h6, .section-title h2 {
    color: #333333;
}

/* Estilo base de Links (Azul Marinho) */
a {
    color: #1A2B4C;
}


/* ==========================================================================
   2. CABEÇALHO E LOGO: Ajuste Perfeito para Desktop e Mobile
   ========================================================================== */
.header .header-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    position: relative !important;
    padding: 10px 15px !important;
    width: 100% !important;
}

/* Logo no Desktop */
.header .logo {
    display: inline-block !important;
    max-width: 220px !important;
    flex-shrink: 0 !important;
}

.header .logo img {
    max-height: 60px !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
}

/* Regras Exclusivas para Tablets (até 991px) */
@media only screen and (max-width: 991px) {
    .header .logo {
        max-width: 180px !important;
    }
}

/* Regras Exclusivas para Mobile (até 767px) */
@media only screen and (max-width: 767px) {
    .header .header-inner {
        display: block !important;
        clear: both !important;
    }

    .header .logo {
        float: left !important;
        max-width: 65% !important;
        margin-top: 5px !important;
    }

    .header .logo img {
        max-height: 45px !important;
    }

    .header .slicknav_btn {
        float: right !important;
        margin-top: 2px !important;
        position: relative !important;
        z-index: 9999 !important;
    }

    .header .slicknav_menu {
        clear: both !important;
        width: 100% !important;
    }
}


/* ==========================================================================
   3. Classes Originais adaptadas para a paleta Synergy
   ========================================================================== */

/* Acentos, botões de texto e ícones em Dourado (#C5A880) */
.header .address li i, .header .social li:hover a, .header .social li:first-child a i, .header .cart-search-bar li:hover a, .header .side-menu .nav li:hover a, .header .nav li:hover a,
.header .nav li.current a, .header .nav .dropdown li:hover a, .features .single-features i, .project .project-hover h4:hover a, .newsblog .news-content h4:hover a, .newsblog .news-content .btn, .newsblog .category ul li:hover a, .newsblog .single-comments a, .newsblog .blog-comments .login a:hover, .sufia-personal .personal-text p span, .my-timeline .single-timeline h2 span, .supia-app-main .app-text h1 .typed-cursor, .newsblog .latest .post-info p, .footer .social-icon li a:hover {
	color: #C5A880;
}

/* Botão Newsletter Hover em Azul Marinho */
.newslatter input[type="submit"]:hover {
    background: #1A2B4C;
}

/* Hovers e focos gerais em Dourado */
a:focus, a:hover, .footer .social li:hover a, .footer .social li.active a {
    color: #C5A880;
}

/* Botões, Badges, Barras e Fundos principais em Dourado (#C5A880) */
.section-title h2::before, .button .btn.primary, .header .cart-search-bar .cart-item, .header .search-form input[type="submit"], .header .nav li a::before, .breadcrumbs ul li.active a, .breadcrumbs h2:before, .breadcrumbs h2:after, .count-down .count::before, .project .project-nav ul li::before, .project .project-hover h4:before, .project.single .project-descreption h2:before, .project.single .project-related h4:before, .team .team-head:before, .newslatter input[type="submit"], .newsblog.single .pagination li.active a, .newsblog .form .search input[type="submit"], .newsblog .single-sidebar h2:before, .newsblog .call-to-action .call-inner, .newsblog .tags ul li a:hover, .newsblog .news-share ul li:hover a, .sufia-personal .personal-text .info li::before, .sufia-personal .personal-text .button .btn.primary, .about-me .progress-bar .prog-bg,
.about-me .social li.active a, .about-me .my-image i, .about-me .about-text h3:before, .about-me .single-skill .progress-bar, .supia-app-main .app-text .button .btn.primary, .app-features .app-single-features i, .sufia-video-area .video-text .btn.primary, .newsblog .blog-comments h2::before, #scrollUp, .k-line, .project.single .project-related .slick-dots li.slick-active button, #contact .form-group .button {
	background: #C5A880;
    color: #FFFFFF;
}

/* Hovers de Botões em Azul Marinho (#1A2B4C) */
.button .btn:hover, .sufia-slider button:hover, .project.single .project-slide button:hover, .newsblog .single-news .link:hover, .newsblog.single .pagination li:hover a, .newsblog.single .news-slide button:hover, .sufia-personal .personal-text .button .btn:hover, .about-me .social li:hover a, .supia-app-main .app-text .button .btn:hover, .app-screnshoot button.PrevArrow:hover,
.app-screnshoot button.NextArrow:hover, .sufia-video-area .video-text .btn:hover, .newsblog .call-inner .btn:hover {
    background: #1A2B4C;
    color: #FFFFFF;
}

.about-me img {
	border-left-color: #C5A880;
}

.app-screnshoot button {
	background: rgba(197, 168, 128, 0.40);
}


/* ==========================================================================
   4. DESIGN MODERNO: Botão "LEIA MAIS" no Slider Principal
   ========================================================================== */
.sufia-slider .welcome-text .button .btn,
.sufia-slider .welcome-text .button .btn.primary {
    background: linear-gradient(135deg, #C5A880 0%, #A88B63 100%) !important;
    color: #FFFFFF !important;
    border: none !important;
    padding: clamp(10px, 2vw, 14px) clamp(22px, 4vw, 36px) !important; /* Padding fluido */
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    border-radius: 50px !important;
    box-shadow: 0 8px 20px rgba(197, 168, 128, 0.35) !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    display: inline-block !important;
    height: auto !important;
    line-height: normal !important;
    width: auto !important;
    max-width: 100% !important;
    white-space: normal !important;
    text-align: center !important;
}

.sufia-slider .welcome-text .button .btn:hover,
.sufia-slider .welcome-text .button .btn.primary:hover {
    background: linear-gradient(135deg, #1A2B4C 0%, #0F1B33 100%) !important;
    color: #FFFFFF !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 25px rgba(26, 43, 76, 0.4) !important;
}

@media only screen and (max-width: 767px) {
    .sufia-slider .welcome-text .button .btn,
    .sufia-slider .welcome-text .button .btn.primary {
        font-size: 13px !important;
        margin: 10px auto !important;
    }
}


/* ==========================================================================
   5. DESIGN MODERNO: Menu Mobile Suspenso (Slicknav)
   ========================================================================== */
.header .slicknav_btn {
    border-radius: 8px !important;
    padding: 8px 12px !important;
    background: #1A2B4C !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.3s ease !important;
}

.header .slicknav_nav {
    background: #1A2B4C !important;
    border-radius: 12px !important;
    padding: 12px 0 !important;
    margin-top: 15px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(197, 168, 128, 0.2) !important;
}

.header .slicknav_nav li a {
    padding: 12px 20px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #FFFFFF !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    transition: all 0.3s ease !important;
}

.header .slicknav_nav li:last-child a {
    border-bottom: none !important;
}

.header .slicknav_nav li a:hover,
.header .slicknav_nav li.active a {
    background: rgba(197, 168, 128, 0.15) !important;
    color: #C5A880 !important;
    padding-left: 28px !important;
}


/* ==========================================================================
   6. CENTRALIZAÇÃO E ESTILIZAÇÃO: Seções "Projetos" e "Equipe"
   ========================================================================== */
.project,
#project,
.project-single,
.project-nav {
    text-align: center !important;
}

.project .project-nav ul {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    padding: 0 !important;
    margin: 0 auto 30px auto !important;
    list-style: none !important;
    gap: 10px !important; /* Espaçamento fluido entre os itens */
}

.project .row,
#project .row,
.team .row,
#equipe .row {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
    margin-left: -15px !important;
    margin-right: -15px !important;
}

.team,
#equipe,
.single-team,
.team .single-team {
    position: relative !important;
    text-align: center !important;
    margin-bottom: 40px !important;
    overflow: hidden !important;
    width: 100% !important; /* Garante que o card ocupe o grid corretamente */
}

.team-head,
.single-team .team-head {
    position: relative !important;
    width: 100% !important;
    max-width: 180px !important; /* Impede que fique gigante no desktop */
    aspect-ratio: 1 / 1 !important; /* Mantém sempre um quadrado perfeito */
    height: auto !important;
    margin: 0 auto 15px auto !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    border: 4px solid #C5A880 !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12) !important;
    background-color: #FFFFFF !important;
}

.single-team img,
.team .single-team .team-head img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    border: none !important;
    display: block !important;
}

.team .hover-team,
.single-team .hover-team,
.team-hover {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    background: rgba(197, 168, 128, 0.95) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 10px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s ease-in-out !important;
    color: #FFFFFF !important;
    box-sizing: border-box !important;
}

.team-head:hover .hover-team,
.single-team:hover .hover-team {
    opacity: 1 !important;
    visibility: visible !important;
}

.team .hover-team p,
.single-team .hover-team p,
.team .hover-team span {
    color: #FFFFFF !important;
    font-size: 11px !important;
    margin: 2px 0 !important;
    line-height: 1.2 !important;
    text-align: center !important;
}

.team .hover-team a {
    color: #1A2B4C !important;
    background: #FFFFFF !important;
    width: 30px !important;
    height: 30px !important;
    line-height: 30px !important;
    border-radius: 50% !important;
    display: inline-block !important;
    margin: 4px 2px !important;
}


/* ==========================================================================
   7. CORREÇÃO: Thumbnails de Vídeos sem esticar
   ========================================================================== */
.sufia-video-area img,
.video-area img,
.single-video img,
.newsblog .news-head img {
    width: 100% !important;
    height: auto !important; /* Alterado para auto para evitar distorção em telas médias */
    max-height: 450px !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 8px !important;
}


/* ==========================================================================
   8. CORREÇÃO: Espaçamento no Fale Conosco
   ========================================================================== */
#contact .contact-form,
.contact .form,
#contact form {
    margin-bottom: 45px !important;
    width: 100% !important; /* Ocupa todo o container flex */
}

@media only screen and (max-width: 767px) {
    #contact .contact-form,
    .contact .form,
    #contact form {
        margin-bottom: 50px !important;
    }
}


/* ==========================================================================
   9. Logos dos Parceiros / Clientes
   ========================================================================== */
.brand .single-brand img {
    max-width: 100%; 
    width: auto;
    max-height: 90px; 
    object-fit: contain; 
    margin: 0 auto; 
    display: block; /* Alterado de inline-block para block para centralizar melhor em grids mobile */
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.brand .single-brand:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

/* ==========================================================================
   10. MÓDULO DE PÁGINAS: TELA INICIAL E INTERNA
   ========================================================================== */
.paginas-section {
    padding: clamp(30px, 5vw, 60px) 0; /* Padding dinâmico baseado na viewport */
    background-color: #F8F9FA;
}

.pagina-card {
    background: #FFFFFF;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    margin: 10px;
    transition: all 0.3s ease;
    border: 1px solid rgba(197, 168, 128, 0.15); 
    display: flex; /* Transforma o card num flex container */
    flex-direction: column;
    height: 100%; /* Igualar alturas nos grids */
}

.pagina-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(26, 43, 76, 0.15);
}

.pagina-img-wrapper {
    width: 100%;
    padding-top: 60%; /* Ratio trick (substituindo height fixa) para manter proporção */
    position: relative;
    background: #E9ECEF;
    overflow: hidden;
    flex-shrink: 0;
}

.pagina-img-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.pagina-card:hover .pagina-img-wrapper img {
    transform: scale(1.05);
}

.pagina-img-wrapper .link {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 45px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    background: #C5A880;
    color: #fff;
    border-radius: 50%;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
    z-index: 2;
}

.pagina-card:hover .pagina-img-wrapper .link {
    opacity: 1;
    visibility: visible;
}

.pagina-img-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(26, 43, 76, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
    z-index: 1;
}

.pagina-card:hover .pagina-img-wrapper::before {
    opacity: 1;
    visibility: visible;
}

/* --- FALLBACK (Quando não há imagem) --- */
.pagina-no-img, .pagina-hero-no-img {
    position: absolute; /* Ajustado para acompanhar o ratio trick */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2B4C 0%, #0F1B33 100%);
    color: #C5A880; 
    font-size: clamp(24px, 4vw, 45px); /* Ícone dinâmico */
    z-index: 0;
}

/* --- TELA INICIAL: Textos do Card --- */
.pagina-info {
    padding: clamp(15px, 3vw, 25px); /* Espaçamento interno dinâmico */
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Preenche o espaço restante do card */
}

.pagina-info h4 {
    font-size: clamp(16px, 2vw, 18px);
    margin-bottom: 8px;
    font-weight: 600;
}

.pagina-info h4 a {
    color: #333333; 
    text-decoration: none;
    transition: color 0.3s ease;
}

.pagina-info h4 a:hover {
    color: #C5A880; 
}

.pagina-info .date a {
    color: #888;
    font-size: 12px;
    margin-right: 10px;
}

.pagina-info .date a i {
    color: #C5A880;
}

.pagina-info p {
    color: #4A4A4A; 
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 20px;
    margin-top: 10px;
    flex-grow: 1; /* Empurra o botão pro final */
}

.pagina-info .btn-link {
    color: #1A2B4C;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-table;
    align-self: flex-start; /* Impede que o botão estique */
}

.pagina-info .btn-link i {
    margin-left: 5px;
    transition: margin 0.3s ease;
}

.pagina-info .btn-link:hover {
    color: #C5A880; 
}

.pagina-info .btn-link:hover i {
    margin-left: 10px;
}

/* --- PÁGINA INTERNA --- */
.pagina-interna-container {
    padding: clamp(30px, 5vw, 50px) 0 clamp(40px, 8vw, 80px);
    background: #FFFFFF;
}

.pagina-interna-header {
    margin-bottom: clamp(20px, 4vw, 40px);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    width: 100%;
}

.pagina-hero-img {
    width: 100%;
    height: clamp(200px, 40vw, 400px); /* Altura fluida inteligente */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.pagina-hero-no-img {
    position: relative;
    height: clamp(180px, 30vw, 250px);
    flex-direction: column;
    text-align: center;
    padding: 20px;
}

.pagina-hero-no-img h2 {
    color: #FFFFFF;
    margin: 0;
    font-size: clamp(24px, 4vw, 36px);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.pagina-interna-content .page-title {
    color: #333333;
    font-size: clamp(26px, 4vw, 36px);
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 15px;
    word-break: break-word; /* Evita quebra de layout em títulos longos no mobile */
}

.pagina-interna-content .page-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 4px;
    background: #C5A880; 
    border-radius: 2px;
}

.pagina-interna-content .page-text {
    color: #4A4A4A;
    line-height: 1.8;
    font-size: clamp(15px, 2vw, 16px);
}

/* Ajustes Finais para Mobile (Telas muito pequenas) */
@media only screen and (max-width: 480px) {
    .project .project-nav ul {
        flex-direction: column;
        align-items: center;
    }
    .project .project-nav ul li {
        margin-bottom: 10px;
        width: 100%;
    }
    .pagina-card {
        margin: 10px 0;
    }
}